<template>
     <div id="app">
        <el-header>订单详情</el-header>
        <el-main>
          <div class="a2">
            <el-button type="primary" @click="add">加菜</el-button>
          </div>
          <div class="aa">           
            <el-table
    :data="tableData"
    style="width: 90%"
    max-height="250"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
    <el-table-column
      fixed
      prop="orderNumber"
      label="订单号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="dishName"
      label="菜名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="dishImg"
      label="菜品图片"
      width="200">
    </el-table-column>
    <el-table-column
      prop="dishPrice"
      label="菜品价格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="dishNumber"
      label="菜品数量"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="退菜操作"
      width="120"
      >
      <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        </template>
    </el-table-column>
    
    
  </el-table>
  
          </div>
        </el-main>
        <el-footer>
          <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-size="page.size"
                
                :total="page.total">
            </el-pagination>
        </el-footer>
        <el-dialog
            title="退菜"
            :visible.sync="detailDialogVisible"
            width="30%"
            >
            <el-form :model="modifyForm" class="demo-form-inline">
                <el-form-item label="数量">
                    <el-input v-model="modifyForm.dishOperateNumber" ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="modifyForm.status" placeholder="选择菜品状态">
                        <el-option label="退菜" value="REMOVE_DISH"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button @click="detailDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleModify">确 定</el-button>    
                </el-form-item>
            </el-form>
        
        </el-dialog>
     </div>
</template>
<script>
   


    export default {
      data() {
      return {
         tableData: [],
        page:{
            current:1,
            total:0,
            pageSize:10
        },
        modifyForm:{},
        detailDialogVisible: false,
        
      }
   },
      methods: {
      handleCurrentChange(current){
                    this.query(current);
                },
                query(current){
                    console.log(this.tableData);
                    //设置默认值
                    current = current?current:1;
                    
                    //(1) get请求传参的格式与post请求很不同
                    this.$axios.get("http://localhost:8082/getOrderInfo",
                    {
                        params: {
                          orderNumber: this.$route.query.orderNumber,
                          current:current,
                          
                        }
                    }
                    ).then(
                        response=>{
                            //（2）返回的response,不是result  
                            // response.data才是result
                            console.log(response);
                            let result = response.data;
                            if(result.code!='200'){
                                this.$message(result.message);
                            }else{
                                let pageResult = result.data;
                                this.tableData= pageResult.records;
                                this.page.total=pageResult.total;
                                this.page.current=pageResult.current;
                                this.page.size=pageResult.size;
                            }
                        }
                    ).catch(error=>{
                        console.error(error);
                        this.$message.error('系统出问题了');
                    });
                },
                handleModify(){
                  this.$axios.post("http://localhost:8082/addDishOperate",this.modifyForm)
                  .then(response=>{//业务异常
                        if(response.data.code!='200'){
                            this.$message.error("退菜失败："+response.data.message);
                        }else{
                          this.$message.success("退菜成功")
                        }
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                    })
                },
                handleClick(row){
                    console.log(row);
                    this.modifyForm=row;
                    this.detailDialogVisible=true;
                },
                add(){
                  this.$router.push({
                  name:'',
                  query:{
                  random:Math.random(),
                  orderNumber:11,
                    }
                })
                window
                }
    },
    mounted(){
                 this.query(null);
                
            }
    }
</script>
<style>
  .aa{
    margin-left: 300px;
  }
  .a2{
    float:right
  }
</style>